<template lang="">
    <div>
        <myheader/>
        <van-form @submit="reg">
                <van-field
                  v-model="form.username"
                  name="username"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                  v-model="form.password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
                />
                <van-field
                v-model="form.mobile"
                name="mobile"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '必须输入手机号' }]"
              />
                <drag-verify
                :width="width"
                :height="height"
                :text="text"
                :circle="false"
                :success-text="successText"
                :background="background"
                :progress-bar-bg="progressBarBg"
                :completed-bg="completedBg"
                :handler-bg="handlerBg"
                :handler-icon="handlerIcon"
                :text-size="textSize"
                :success-icon="successIcon"
                ref="Verify"
            >
            </drag-verify>
                <div style="margin: 16px;">
                  <van-button round block type="info" native-type="submit" style='width:100px'>提交</van-button>
                </div>
              </van-form>
    </div>

</template>
<script>
//导入myheader.vue头部文件
import myheader from '@/components/myheader'
//导入滑动模块
import dragVerify from 'vue-drag-verify'

name = "reg"
export default {
  name: 'reg',
  data() {
    return {
      form: {},
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#66cc66",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 320,
      height: 42,
      textSize: "18px",
    };
  },
  methods: {
    reg() {
      if (this.$refs.Verify.isPassing) {
        this.$axios.post('/users/reg', this.form).then(res => {
          if (res.data.code == 200) {
            alert('注册成功')
            this.from = {}
            // this.$router.go(0)
          } else if (res.data.code == 10012) {
            alert('手机号格式不正确')
          }
        })
      } else {
        alert('请验证后再进行登录')
      }
    },
  },
  //注册组件
  components: {
    //封装头部模块的组件
    'myheader': myheader,
    //封装滑动模块的组件
    'dragVerify': dragVerify,

  }
}
</script>
<style scoped>
/* 取消滑动模块按钮与边框之间的间隙 */
>>> .dv_handler {
  height: 42px !important
}
</style>
